<template>
  <div>
    <div id="myChart" style="width:100%;height:600px;margin-top:30px"></div>
    <div style="display:flex;justify-content:center;margin-top:30px;margin-bottom:70px">
      <el-button @click="tonewGet" :style="{backgroundColor:current==1?'#00bec7':'',color:current==1?'#fff':'#333'}">国内/国外 新增确诊</el-button>
      <el-button @click="toFromfoe"  :style="{backgroundColor:current==2?'#00bec7':'',color:current==2?'#fff':'#333'}">国外累计确诊/ 现有确诊</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      current:1
    };
  },
  mounted() {
    this.getMapData();
  },
  methods: {
    getMapData(){
    let myChart = echarts.init(document.getElementById("myChart"));
    const xAxisData =this.current==1? [
      "2.20",
      "3.10",
      "3.29",
      "4.17",
      "5.6",
      "5.25",
      "6.13",
      "7.2",
      "7.21",
      "8.9",
      "8.28",
      "9.16",
      "10.5",
      "10.24",
      "11.12",
      "12.1",
      "12.20",
      "1.8"
    ]:["2.20",
      "3.8",
      "3.25",
      "4.11",
      "4.28",
      "5.15",
      "6.1",
      "6.18",
      "7.5",
      "7.22",
      "8.8",
      "8.25",
      "9.11",
      "9.28",
      "10.15",
      "11.1",
      "11.18",
      "12.5",
      "12.22",
      "1.8"];
    var option = {
      title:{
            show:true, //显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text:this.current==1? '国内/国外新增确诊趋势':'国外累计确诊/现有确诊趋势', //主标题文本，'\n'指定换行
            link:'', //主标题文本超链接,默认值true
            target: null, //指定窗口打开主标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
            subtext: '单位:例', //副标题文本，'\n'指定换行
            sublink: '', //副标题文本超链接
            subtarget: null, //指定窗口打开副标题超链接，支持'self' | 'blank'，不指定等同为'blank'（新窗口）
            x:'left', //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y: 'top', //垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            textAlign: null ,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
            itemGap: 10, //主副标题纵向间隔，单位px，默认为10
            textStyle: { //主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
                fontSize: 18,
                fontStyle: 'normal',
                fontWeight: 'bold',
            },
            subtextStyle: {//副标题文本样式{"color": "#aaa"}
                fontSize: 12,
                fontStyle: 'normal',
                fontWeight: 'normal',
                color:"#999"
            },
            zlevel: 0, //一级层叠控制。默认0,每一个不同的zlevel将产生一个独立的canvas，相同zlevel的组件或图标将在同一个canvas上渲染。zlevel越高越靠顶层，canvas对象增多会消耗更多的内存和性能，并不建议设置过多的zlevel，大部分情况可以通过二级层叠控制z实现层叠控制。
            z: 6, //二级层叠控制，默认6,同一个canvas（相同zlevel）上z越高约靠顶层。
        },
      textStyle: {
        fontFamily: "Din-Light"
      },
      color:this.current==1?['#FFD700','red']:['red','#fe9c8f'],
      legend: {
        
        data: [
          {
            name:this.current==1? "国内":'累计确诊',
            icon: "circle"
            },
          {
            name:this.current==1? "国外":'现有确诊',
            icon: "circle"
            }
        ],
        left: "right",
      },
      tooltip: {
        backgroundColor: "#fff",
        trigger: "axis",
        axisPointer: {
          type: "none"
        },
        textStyle: {
          color: "#565656",
          lineHeight: 28
        },
        confine: true,
        padding: 12,
        extraCssText:
          "box-shadow: 0px 2px 8px 0px #cacaca;border-radius: 4px;opacity: 0.9;max-height: 100%;",
        formatter: {
          _custom: {
            type: "function",
            display: "<span>ƒ</span> (params)"
          }
        }
      },
      grid: {
        left: 0,
        right: 0,
        top: 100,
        bottom: 100
      },
      //x轴数据
      xAxis: {
        type: "category",
        boundaryGap: true,
        data: xAxisData,
        axisLabel: {
          color: "#a0a9bc",
          interval:0,  
          rotate:40
          //X轴标签 label 做了特殊处理，防止左右溢出
        },
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      yAxis: {
        name: "",
        nameTextStyle: {
          color: "gray"
        },
        min:this.current==1?0:0,
        max:this.current==1?1000000:100000000,
        splitNumber:5,   
        type: "value",
        axisLabel: {
          color: "#a0a9bc",
          inside: true,
          margin: 0,
          verticalAlign: "bottom"
        },
        splitLine: {
          lineStyle: {
            type: "dashed"
          }
        },
        minInterval: 1,
        axisLine: {
          show: false
        },
        axisTick: {
          show: false
        }
      },
      series: [
        {
          name:this.current==1? "国内":'累计确诊',
          data:this.current==1? [
           0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            0              
          ]:[
            11110000,
            11000050,
            11000100,
            11020000,
            11050000,
            12000000,
            32020000,
            32050000,
            31080000,
            31050000,
            31010000,
            31080000,
            31020000,
            41020000,
            41080020,
            61080020,
            71080020,
            76080020,
            72080020,
            70080020        
          ],
          type: "line",
          smooth: true,
          smoothMonotone: "x",
          cursor: "pointer",
          showSymbol: false,
          lineStyle: {
            color: this.current==1?"#fe9c8f":'red'
          }
        },
        {
          name:this.current==1?"国外":'现有确诊',
          data:this.current==1? [
            110000,
            110050,
            110100,
            110200,
            110500,
            120000,
            120200,
            120500,
            110800,
            310500,
            310100,
            310800,
            310200,
            410200,
            410820,
            610820,
            710820,
            760820      
          ]: [
            0,
            0,
            0,
            0,
            0,
            0,
            0,
            12000000,
            12005000,
            12000000,
            12008000,
            18000000,
            22000000,
            22000000,
            32000000,
            22900000,
            22000000,
            22000000,
            32000000,
            34008000           
          ],
          type: "line",
          smooth: true,
          smoothMonotone: "x",
          cursor: "pointer",
          showSymbol: false,
          lineStyle: {
            color:this.current==1? "red":'#FFD700'
          }
        }
      ]
    };
    myChart.setOption(option);
    },
    tonewGet(){
      this.current=1;
       this.getMapData();
    },
     toFromfoe(){
      this.current=2;
       this.getMapData();
    }
  }
};
</script>

<style></style>
